<template>
  <div class="header">
    <div class="system-name">
      >>&nbsp;&nbsp;{{ title }}
    </div>
    <el-dropdown>
      <span class="el-dropdown-link">
        <el-avatar>admin</el-avatar>
        <el-icon class="el-icon--right">
          <arrow-down />
        </el-icon>
      </span>
      <template #dropdown>
        <el-dropdown-menu style="--el-dropdown-menuItem-hover-fill: rgb(254,240,240);--el-dropdown-menuItem-hover-color: rgb(245,108,108)">
          <el-dropdown-item @click="leave">退出系统</el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>
  </div>
</template>

<script lang="ts" setup>
import {onMounted, ref, watchEffect} from 'vue'
import router from "../../router/router";
import {useRoute} from "vue-router";
import {ElMessage, ElMessageBox} from "element-plus";

const title = ref('');
const route = useRoute();
onMounted(() => {
  // 初始化设置
  title.value = route.meta.title;
  // 监听路由变化，更新标题
  watchEffect(() => {
    title.value = route.meta.title;
  })
})

// 离开系统
const leave = () => {
  ElMessageBox.confirm(
    '您确定要离开嘛？', '危险操作', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type:'warning'
    }).then(() => {
    localStorage.removeItem("admin");
      router.push('/adminLogin');
      ElMessage({
        type: 'success',
        message: '退出登录成功！'
      })
  })
}
</script>

<style scoped>
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
  height: 60px;
  border-bottom: 1px solid #dcdfe6;
}
.system-name {
  font-size: 20px;
  font-weight: bold;
  color: #c7cad0;
}
.el-dropdown-link {
  cursor: pointer;
  display: inline-block;
  padding: 0 20px;
  height: 100%;
  line-height: 60px;
  color: #000000;
  align-items: center;
  border: none !important;
  outline: none;
  box-shadow: none;
}
</style>